import React from "react";
import styles from "../css/train.module.css";
import { useSearchParams } from "react-router-dom";
import dayjs from "dayjs";

function TicketCard(props) {
  console.log(props);

  let [sp] = useSearchParams();
  let dateL = dayjs(sp.get("date")).format("M月D日 ddd");
  let dateR = dayjs(sp.get("date")).add(1, "day").format("M月D日 ddd");

  return (
    <div className={styles.cardbox}>
      <span>{props.startStation}</span>
      <span>{props.trainNo}</span>
      <span>{props.endStation}</span>

      <span>{props.startTime}</span>
      <span>
        <svg className="icon" aria-hidden="true">
          <use xlinkHref="#icon-gaotie"></use>
        </svg>
      </span>
      <span>{props.endTime}</span>

      <span>{dateL}</span>
      <span>耗时 {props.timeTaken}</span>
      <span>{props.isNextDay ? dateR : dateL}</span>
    </div>
  );
}

export default TicketCard;
